<template>
  <div id="card">
        <div>
            <div class="div1">
                <el-row>
                    <el-col :span="5" v-for="item in imgList" :key="item.id" @click.native="clickCard(item.id)">
                            <div>
                                <img :src="'http://127.0.0.1:8082/getImageById?id=' + item.coverId " class="card_img1"/>
                                <p class="card_p1">{{item.cardName}}</p>
                            </div>
                    </el-col>
                    <el-col :span="5" :push="7">
                        <p class="card_p2" @click="clickMyMember">我的会员卡></p>
                    </el-col>
                </el-row>
            </div>    
        </div>
  </div>
</template>

<script>
const axios = require('axios');
export default {
    name:'card',
    data(){
        return{
            imgList: [], //会员卡类型集合
            userId:'', //头部获取用户id
            loginName: '', //头部获取登录名称
            getUser:[], //用户数据集合     
        }
    },
    methods:{
        //查询所有会员卡类型
        getCards(){
            axios.get('http://127.0.0.1:8082/card/getCards').then(res=>{
                this.imgList = res.data.obj
            }).catch(error => {
                this.$message.error('查询会员卡类型失败！');
            })

        },
        //点击会员卡类型
        clickCard(id){
            this.$router.push({name:'Cardintroduce', query:{id: id}})
        },
        //点击我的会员卡
        clickMyMember(){
            this.userId = window.sessionStorage.getItem('id')
            this.$router.push({name:'MyMember', query:{id: this.userId}})
        },
         //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            });
        },
    },
    mounted(){
        this.getCards()

    },
}
</script>

<style scoped>
.div1{
    margin:0 auto;
    width:1200px;
    height:800px;
    margin-top:30px;
}
.card_img1{
    width:208px;
    height:118px;
}
.card_p1{
    font-size:12px;
    font-weight: bold;
    margin-top:10px;
    width:208px;
    text-align: center;
}
.card_p2{
    font-size:12px;
    font-weight: bold;
    margin-top:10px;
    width:208px;
    text-align: center;
}
.card_p2:hover{
    cursor:pointer;
    color:blue;
}
</style>